<template>
  <label>
    <span>用户名：</span>
    <input type="text" placeholder="请输入" :value="model" @input="onInput" />
  </label>
</template>

<script setup lang="ts">
// 为了让该组件支持 v-model 使用，需要定义 props 与 emits

// defineProps({
//   modelValue: String,
// });

// const emit = defineEmits(["update:modelValue"]);

// function onInput(event) {
//   // 获取到输入框输入的value值
//   const value = event.target.value;
//   console.log("value", value);

//   // 触发事件
//   emit("update:modelValue", value);
// }

/**
 * defineModel 就省去了，写 defineProps 与 defineEmits 的两个步骤
 *    返回值，就是接收到的 prop 数据。modelValue, 且该数据可以直接操作修改，无需 emit
 */
const model = defineModel();

function onInput(event) {
  // 获取到输入框输入的value值
  const value = event.target.value;
  console.log("value", value);

  // 直接操作 model 修改
  model.value = value;
}
</script>
